<template>
	<view class="" style="width: 100vw;height: 100vh">
		<!-- <view  style="min-height: 100vh">
			<image class="bg" src="/static/login/log_bg.png" mode="scaleToFill"></image> -->
			<view class="content" :style="{'background':kbackgroundColor}" style="min-height: 100vh">
			<hx-navbar :title="title" :back="true" :fixed="false" :color="knavTitleColor" barPlaceholder="hidden"
				transparent="auto"></hx-navbar>
			<view class="content">

				<view class="article">

					<view class="article-title" v-if="shopLogo && shopName">
						<img :src="shopLogo" alt="" class="shop-logo" />
						<text class="shop-name color-3">{{ shopName }}</text>
						<text class="fsz24 color-9 article-time">{{ info.ctime }}</text>

						<image src="/static/image/yuedu.png" mode="scaleToFill" v-if="idType != 2"
							style="width: 30rpx;height: 30rpx;vertical-align: middle; margin-left: 20rpx;"></image>
						<text class="color-9 article-time" style="font-size:24rpx" v-if="idType != 2">
							<!-- {{ info.pv }} -->
						</text>
					</view>

					<view class="article-content">
						<view class="color-3 title_class" style="">
							{{info.title}}
						</view>
						<jshopContent :content="info.content" v-if="info.content"></jshopContent>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import jshopContent from '@/components/jshop/jshop-content.vue';
	export default {
		components: {
			jshopContent
		},
		data() {
			//2023-8-22
			return {
				idType: 1, //1文章 2公告 3微信图文消息
				id: 0,
				info: {},
				shareUrl: '/#/pages/share/jump',
				title: ''
			};
		},
		onLoad(e) {
			this.idType = e.id_type;
			this.id = e.id;

			if (!this.idType && !this.id) {
				this.$common.errorToShow('请求出错', res => {
					uni.switchTab({
						url: '/pages/index/index'
					});
				});
			} else if (this.idType == 1) {
				this.articleDetail();
			} else if (this.idType == 2) {
				this.title = '公告详情'
				// uni.setNavigationBarTitle({
				// 	title: '公告详情'
				// });
				this.noticeDetail();
			} else if (this.idType == 3) {
				this.title = '图文消息'
				// uni.setNavigationBarTitle({
				// 	title: '图文消息'
				// });

				this.messageDetail();
			}
		},
		onPullDownRefresh() {
			setTimeout(function() {
				uni.stopPullDownRefresh()
			}, 500)
		},
		computed: {
			shopName() {
				return this.$store.state.config.shop_name;
			},
			shopLogo() {
				return this.$store.state.config.shop_logo;
			}
		},
		methods: {
			articleDetail() {
				let data = {
					article_id: this.id
				};
				this.$api.articleInfo(this.id, res => {
					if (res.status) {
						this.info = res.data;
						this.title = res.data.title
						// uni.setNavigationBarTitle({
						// 	title: this.info.title
						// });
					} else {
						this.$common.errorToShow(res.message, res => {
							uni.navigateBack({
								delta: 1
							});
						});
					}
				});
			},
			noticeDetail() {
				let data = {
					id: this.id
				};
				this.$api.noticeInfo(this.id, res => {
					if (res.status) {
						this.info = res.data;
						uni.setNavigationBarTitle({
							title: this.info.title
						});
					} else {
						this.$common.errorToShow(res.message);
					}
				});
			},
			//微信图文消息
			messageDetail() {
				let data = {
					id: this.id
				};
				this.$api.messageDetail(data, res => {
					if (res.status) {
						this.info = res.data;
						uni.setNavigationBarTitle({
							title: this.info.title
						});
					} else {
						this.$common.errorToShow(res.msg);
					}
				});
			},
			//获取分享URL 2023-8-22
			getShareUrl() {
				let data = {
					client: 2,
					url: "/#/pages/share/jump",
					type: 1,
					page: 5,
					params: {
						article_id: this.id,
						article_type: this.idType
					}
				};
				let userToken = this.$db.get('userToken');
				if (userToken && userToken != '') {
					data['token'] = userToken;
				}
				this.$api.share(data, res => {
					this.shareUrl = res.data
				});
			}
		},
		// watch: {
		// 	id: {
		// 		handler() {
		// 			this.getShareUrl();
		// 		},
		// 		deep: true
		// 	}
		// },
		//分享
		onShareAppMessage() {
			return {
				title: this.info.title,
				// #ifdef MP-ALIPAY
				//desc: this.goodsInfo.brief,
				// #endif
				//imageUrl: this.goodsInfo.album[0],
				path: this.shareUrl
			};
		}
	};
</script>

<style scoped lang="scss">
	.content {
		/*  #ifndef  H5  */
		/* height: 100vh; */
		/*  #endif  */
	}

	.article {
		padding: 20upx;
		position: relative;
	}

	.article-title {

		font-size: 32upx;
		color: #e5e5e5;
		margin-bottom: 20upx;
		position: relative;
		height: 100upx;
		display: flex;
		justify-content: space-between;
	}

	.article-time {
		/* margin-left: 20upx; */

		font-size: 28rpx !important;
		line-height: 52px;
	}

	.article-content {
		font-size:30rpx !important;
		//font-size: 28upx !important;
		line-height: 1.6;
		margin: 20upx auto;
		border-radius: 20rpx;
		width: 674rpx;
		font-weight: 400;
		background-color: #fff;
		padding: 40rpx;
		min-height: 1200rpx;
		.img{
			border: 11px solid red !important;
		}
	}

	.article-content p img {
		width: 100% !important;
	}

	.shop-logo {
		width: 60upx;
		height: 60upx;
		border-radius: 50%;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
	}

	.shop-name {
		line-height: 100upx;
		margin-left: 80upx;
		font-size: 32rpx !important;
	}

	.title_class {

		font-size: 34rpx; //font-size: 38upx;
		font-weight: 400;
		color: #333333;
		//font-weight: 600;
		margin: 0rpx auto 20rpx;
	}
	::v-deep .hx-navbar__header-container-inner{
	  overflow: hidden !important;
	  text-overflow: ellipsis !important;
	  display: -webkit-box !important;
	  -webkit-line-clamp: 1;//文字上限行
	  -webkit-box-orient: vertical;
	}
</style>